<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="css/weui.css"/>
    <link rel="stylesheet" href="css/weuix.css"/>

    <script src="js/zepto.min.js"></script>
    <script src="js/zepto.weui.js"></script>
    <script>

        function match(str, reg) {
            return reg.test(str);
        }

        function loadData(keyword) {
            $.getJSON("data.json", function (data) {
                var $dataList = $("#dataList");
                var strHtml = "";
                $dataList.empty();
                $.each(data, function (index, json) {
                    var title = json["title"];
                    var text = json["text"];
                    var info = json["info"];
                    var reg = new RegExp(keyword.toLowerCase());
                    if (match(title.toLowerCase(), reg) || match(text.toLowerCase(), reg) || match(info.toLowerCase(), reg)) {
                        strHtml += "<li class=\"weui-news-item\"><div class=\"weui-news-inners\">";
                        strHtml += "<div class=\"weui-news-title\">" + title + "</div>";
                        strHtml += "<div class=\"weui-news-text\">";
                        strHtml += "<p class=\"weui-news-p\">" + text + "</p>";
                        strHtml += "</div> <div class=\"weui-news-info\"><div class=\"weui-news-infoitem\"><span></span></div>";
                        strHtml += "<div class=\"weui-news-infoitem\">" + info + "</div></div>";
                        strHtml += "</div></li>";
                    }
                });
                $dataList.html(strHtml);
            });
        }

        $(function () {
            loadData("");
            var $searchInput = $('#searchInput');
            $searchInput.on('input', function () {
                if (this.value.length) {
                    loadData(this.value);
                } else {
                    loadData("");
                }
            });
            $('#searchCancel').on('click', function () {
                loadData("");
            });
        });

    </script>
</head>

<body ontouchstart>
<div class="page-hd">
    <h1 class="page-hd-title">
        D3中英文对照表
    </h1>
    <p class="page-hd-desc"></p>
</div>

<div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form" action="#">
        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="" type="search">
            <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText"
               style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
            <i class="weui-icon-search"></i>
            <span>搜索</span>
        </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="weui-news">
    <ul class="weui-news-list" id="dataList">

    </ul>
</div>

<br>
<br>
<div class="weui-footer weui-footer_fixed-bottom">
    <p class="weui-footer__text">Copyright &copy; alex</p>
</div>
</body>
</html>